<!DOCTYPE html>
<html>
<head>
    <title>鹿鹿泽店面上课情况统计</title>
    <link rel="stylesheet" href="../static/css/minghu.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
</head>
<body style="background-color: rgb(254, 254, 255);">
    {% include 'show_ins_info.html' %}
    <hr>
    <h2>鹿鹿泽店面上课情况统计</h2>
    <div>
        <div class="form-row">
            <h4>开始日期</h4>
            <input id='startDate' type="date" onchange="checkDateAndShow();">
        </div>

        <div class="form-row">
            <h4>结束日期</h4>
            <input id='endDate' type="date" onchange="checkDateAndShow();">
        </div>

        <div id="dateErr" style=" padding-left:10px;font-size:12px;color:brown"></div>

    </div>
    <div style="padding:10px;"><button id="showThisMonthBtn"  onclick="showThisMonth();">查看本月</button></div>
    <hr>
    <div id="statTitle" style=" padding-left:10px;margin-top:20px;font-weight: bold;color:rgb(26, 65, 138)"></div>
    <div id="statErr" style="padding-left:10px;"></div>
    <div id="stat" style="width: 380px;height: 280px; padding-left:10px;"></div>
    

    <script src="../static/js/common.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    
    <script>
        let insName;
        let insId;
        let insRole;
        let insList;
        
        document.addEventListener('DOMContentLoaded',function(){
            // loginCheck();           
            const insInfo=hideInsSelectBlockAndGetInsInfo();
            insId=insInfo.sessionInsId;
            insName=insInfo.sessionInsName;
            insRole=insInfo.sessionInsRole;
            if(insRole==='ins'){
                window.location.replace('./index');
            }

            selectToday('startDate','date');
            selectToday('endDate','date');
            checkDateAndShow();
            // getAndShowStat();


           
        });

        function showThisMonth(){
            const today=dateToStringGmt(new Date(),'date');
            const firstDate=today.slice(0,-2)+'01';
            document.getElementById('startDate').value=firstDate;
            document.getElementById('endDate').value=today;
            checkDateAndShow();
        }

        function checkDateAndShow(){
            const startDate=document.getElementById('startDate');
            const endDate=document.getElementById('endDate');
            const dateErr=document.getElementById('dateErr');

            dateErr.innerHTML='';

            if(compareDatesOnly2(new Date(startDate.value),new Date(endDate.value))<0){
                startDate.value=endDate.value;
                dateErr.innerHTML='结束日期小于开始日期，已调整到相同日期。';
                getAndShowStat();
            }else{
                dateErr.innerHTML='';
                getAndShowStat();
            }


        }

        function getAndShowStat(){
            const statErr=document.getElementById('statErr');
            const stat=document.getElementById('stat');
            const statTitle=document.getElementById('statTitle');
            const startDate=dateToString(document.getElementById('startDate').value,'date');
            const endDate=dateToString(document.getElementById('endDate').value,'date');

            // stat.textContent='';
            statErr.innerHTML='';

            // 如果需要清空图表，销毁当前图表实例
            if (stat.chartInstance) {
                echarts.dispose(stat.chartInstance);
            }

            fetch('./get_day_cls_data', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
                },
            body:JSON.stringify({'startDate':startDate,'endDate':endDate})
            })
            .then(response => response.json())
            .then(data => {
                // console.log(data);
                if(data['res']==='ok'){
                    statTitle.innerHTML='上课情况统计图';
                    showDayStat(data['data']);
                    statErr.innerHTML='';

                    // 存储当前图表实例
                    stat.chartInstance = echarts.init(stat);
                }else{
                    statTitle.innerHTML='';
                    statErr.innerHTML='无上课数据';                    
                }
            })                 
            .catch(error=>{
                console.error('获取卡号错误',error)
            });
        }


        function showDayStat(rawData){
            
            const chartBox=document.getElementById('stat');

            // 数据处理：合并相同小时段的数据
            let mergedData = {};
            // console.log(rawData)

            

            rawData.forEach(function(item) {
                // const date = item[2].split(' ')[0];  // 提取日期
                // const time = item[2].split(' ')[1].split(':')[0];  // 提取小时，不考虑分钟和秒

                const dateStr=dateToStringGmt(item[2],'dateHour')
                const date = dateStr.split(' ')[0];
                const time = dateStr.split(' ')[1].split(':')[0]; 

                const key = date + ' ' + time;  // 用日期和小时作为唯一标识
                const courseInfo = item[1] + ' ' + item[3] + '/' + item[4] + ' @' + item[6];

                if (mergedData[key]) {
                    // 如果该时间点已经有记录，合并课程信息
                    mergedData[key].info.push(courseInfo);
                    mergedData[key].count += 1;  // 增加课程数量
                } else {
                    // 初始化该时间点的数据
                    mergedData[key] = {
                        date: date,
                        hour: parseInt(time),
                        info: [courseInfo],
                        count: 1
                    };
                }
            });

            

            // 转换为 ECharts 可用的数据格式
            const scatterData = Object.values(mergedData).map(function(item) {
                return {
                    name: item.date+'\n'+item.info.join('\n'),  // 合并所有课程信息用于 tooltip
                    value: [item.hour, item.date],  // X轴是小时，Y轴是日期
                    symbolSize: item.count * 10  // 根据课程数量调整点的大小
                };
            });

            // console.log(scatterData)

            // 配置 ECharts 图表
            const option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name.replace(/\n/g, '<br/>');  // 显示合并后的详细信息并换行
                    },
                    textStyle:{
                        fontSize:8
                    },
                },
                xAxis: [{
                    type: 'value',
                    name: '时间',
                    min: 7,
                    max: 22,
                    splitNumber: 15,
                    axisLabel: {
                        formatter: function (value) {
                            return value ;  // 显示小时数
                        }
                    }
                },
                {
                    type: 'value',
                    name:'时间',
                    position: 'top',  // 显示在顶部
                    min: 7,
                    max: 22,
                    splitNumber: 15,
                    axisLabel: {
                        formatter: function (value) {
                            return value;  // 显示小时数
                        }
                    }
                }],
                yAxis: {
                    type: 'category',
                    name: '日期',
                    nameTextStyle: {
                        padding: [0, 0, 0, -38], // 通过调整内边距使其向左移动
                        color:'#778800',
                    },
                    data: [...new Set(rawData.map(item => dateToStringGmt(item[2],'dateHour').split(' ')[0]))],  // 生成唯一的日期作为Y轴
                    axisLabel: {
                        color:'#778800',
                        fontSize: 8,  // 设置字体大小
                        rotate: 60,    // 设置旋转角度
                        formatter: function (value) {
                            return value;  // 保持日期格式
                        }
                    },
                },
                series: [{
                    name: '上课数据',
                    type: 'scatter',
                    data: scatterData
                }]
            };

            // 使用配置项显示图表
            const newHt=280+(Object.keys(mergedData).length-5)*5;
            if(Object.keys(mergedData).length>5){
                chartBox.style.height=newHt+'px';
                // chartBox.style.height='400px';
            }else{
                chartBox.style.height='280px';
            }
            if(newHt>1000){
                chartBox.style.height='1000px';
            }
            // console.log(Object.keys(mergedData).length,newHt,chartBox.style.height)
            const chart = echarts.init(chartBox);
            chart.setOption(option);
            chart.resize();

        }
    </script>
  
</body>
</html>
